<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row style="text-align: center">
        <!-- 校区 -->
        <el-date-picker
          v-model="listQuery.queryStartDate"
          align="right"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 180px"
        ></el-date-picker>
        <el-date-picker
          v-model="listQuery.queryEndDate"
          style="width: 180px"
          align="right"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
        ></el-date-picker>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
          >{{ $t("table.search") }}</el-button
        >
        <el-button
          v-waves
          :loading="downloadLoading"
          v-permission="['business:export']"
          class="filter-item"
          type="primary"
          icon="el-icon-download"
          @click="handleDownload"
          >{{ $t("table.export") }}</el-button
        >
      </el-row>
      <el-row style="text-align: center;margin-top: 20px">
        <!-- 校区 -->
        <el-radio
          v-if="userDataResKey == '300'"
          v-model="listQuery.queryKey"
          label="1"
          @change="handleFilter"
          >公司</el-radio
        >
        <el-radio
          v-if="userDataResKey == '300' || userDataResKey == '200'"
          v-model="listQuery.queryKey"
          label="2"
          @change="handleFilter"
          >校区</el-radio
        >
        <el-radio
          v-if="
            userDataResKey == '300' ||
              userDataResKey == '200' ||
              userDataResKey == '100'
          "
          v-model="listQuery.queryKey"
          label="3"
          @change="handleFilter"
          >员工</el-radio
        >
      </el-row>
    </div>
<el-alert

						  title=""
						  type="info"
						  description="温馨提示:默认显示本月数据"
						  >
						</el-alert>
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="排名" align="center" width="165">
        <template slot-scope="scope">
          <span>{{ scope.row.rankNum }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listQuery.queryKey=== '1' " label="公司" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rankName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listQuery.queryKey=== '2' " label="校区" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rankName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listQuery.queryKey=== '3' " label="员工" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rankName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="线索量" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rankClueAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业绩金额（元）" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rankTotalSum }}</span>
        </template>
      </el-table-column>
    </el-table>
<!--    <pagination-->
<!--      v-show="total > 0"-->
<!--      :total="total"-->
<!--      :page.sync="listQuery.current"-->
<!--      :limit.sync="listQuery.size"-->
<!--      @pagination="getList"-->
<!--    />-->
  </div>
</template>

<script>
import { fetchOrg, fetchChannel, fetchCourse } from "@/api/clue";
import {
  fetchPerformanceRank,
  fetchExportPerformanceRank,

} from "@/api/statistics";
import { queryUserInfo } from "@/api/system/user";

import waves from "@/directive/waves"; //  水波纹指令
import Pagination from "@/components/Pagination"; //  Secondary package based on el-pagination
import { parseTime } from "@/utils";
import permission from "@/directive/permission/index.js"; // 权限判断指令

export default {
  name: "campusVisitCon",
  components: { Pagination },
  directives: {
    waves,
    permission
  },
  data() {
    return {
      orgIdOptions: [], // 校区
      channelTypeIdOptions: [], // 渠道类型
      channelIdOptions: [], // 渠道
      departmentIdOptions: [], // 科系
      courseOptions: [], // 课程
      ownerIdOptions: [], // 咨询师
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      userDataResKey: "",
      listQuery: {
        current: 1,
        size: 20,
        queryStartDate: "",
        queryEndDate: "",
        queryKey: ""
      },
      downloadLoading: false,
    };
  },
  created() {
    //this.getOrgIdOptions();
    this.getUser();
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      fetchPerformanceRank(this.listQuery).then(response => {
        this.list = response.data;
        this.total = response.count;
        this.listLoading = false;
      });
    },
    getUser() {
      queryUserInfo().then(res => {
        const userDataResKey = res.data.dataResourceKey;
        this.userDataResKey = userDataResKey;
        if (userDataResKey) {
          if (userDataResKey === "300") {
            this.listQuery.queryKey = "1";
          } else if (userDataResKey === "200") {
            this.listQuery.queryKey = "2";
          } else if (userDataResKey === "100") {
            this.listQuery.queryKey = "3";
          } else {
          }
        } else {
          this.$message({
            message: "数据权限配置不正确！请联系管理员",
            type: "error"
          });
        }
      });
    },
    handleFilter() {
      this.listQuery.current = 1;
      this.getList();
    },
    //  所有的获取下拉框数据方法
    //  获取所有校区()
    getOrgIdOptions() {
      const queryMethod = "queryClueOrStatistic"
      fetchOrg(queryMethod).then(response => {
        this.orgIdOptions = response.data;
      });
    },
    // 根据校区获取所有渠道类型(校区ID)
    getChannelTypeOptions(queryId, queryKey) {
      fetchChannel(queryId, "0").then(response => {
        this.channelTypeIdOptions = response.data;
      });
    },
    // 根据渠道ID获取对应的渠道(校区ID)
    getChannelOptions(queryId, queryKey) {
      fetchChannel(queryId, "1").then(response => {
        this.channelIdOptions = response.data;
      });
    },


    // 所有change事件
    // 校区变化（重置渠道类型、渠道、科系、课程、咨询师）
    handleOrgIdChange(orgId) {
      this.listQuery.channelTypeId = "";
      this.listQuery.channelId = "";
      this.getChannelTypeOptions(orgId);
      this.channelIdOptions = null;

    },
    // 渠道类型变化（重置渠道）
    handleChannelTypeIdChange(channelTypeId) {
      this.listQuery.channelId = "";
      this.getChannelOptions(channelTypeId);
    },
    handleDownload() {
      this.downloadLoading = true;
      fetchExportPerformanceRank(this.listQuery).then(response => {
        const exportList = response.data;
        import("@/vendor/Export2Excel").then(excel => {
          const tHeader = [
            "排名",
            "公司",
            "线索量",
            "业绩金额（元）"
          ];
          const filterVal = [
            "rankNum",
            "rankName",
            "rankClueAmount",
            "rankTotalSum",
          ];
          const data = this.formatJson(filterVal, exportList);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: "业绩排行统计"
          });
          this.downloadLoading = false;
        });
      });



    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "createTime") {
            return parseTime(v[j]);
          }
          else {
            return v[j];
          }
        })
      );
    }
  }
};
</script>
